/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";

/*
Old Forms

## Inline

```html
<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
```

## Hint Text

For text beneath a form elements that give further explanation about the field.
This was added for some legacy code, not sure if it'll work well elsewhere.

```html
<input type="text" placeholder="Sortable Name"> <div class="hint-text">The name displayed in sorted lists</div>
```

## Dialog Form

Add the class `form-dialog` to get the `form-controls` to display properly in a
dialog form and proper overflow scrolling of content. No need to use
`$.fn.fixDialogButtons`.

**Note**: You must wrap your content in `.form-dialog-content` and use the
height option for jQuery UI dialog. To get the scrolling and fixed form
controls on the bottom required this.

```html
<button id="show-dialog-buttons-dialog" class="btn">Show Dialog</button>
<form id="dialog-buttons-dialog" class="form-dialog">
  <div class="form-dialog-content">
    <p style="height: 1000px;">Aren't the form controls beautiful?<br> Scroll down</p>
    <p>Hooray for scrolling</p>
  </div>
  <div class="form-controls">
    <button class="btn btn-primary" type="button">Submit</button>
  </div>
</form>
```

*/

input[type=text].loading {
  background-image: url('/images/ajax-reload-animated.gif');
  background-repeat: no-repeat;
  background-position: 98% center;
}

.loadingIndicator, .paginatedLoadingIndicator {
  background-image: url('/images/ajax-reload-animated.gif');
  background-repeat: no-repeat;
  background-position: center center;
  height: 20px;
}

// Hint Text

.hint-text {
  @include fontSize(12px);
  color: $ic-hint-text;
}

input + .hint-text {
  /* pull up into the input */
  margin-top: -8px;
  /* replace the inputs margin-bottom */
  margin-bottom: 10px;
}

// Form Table

.formtable {
  td:first-child {
    /* lines-up label in first cell with input in second */
    padding-top: 6px;
  }
}

// Dialog Form

.form-dialog {
  padding-bottom: 70px !important;
  margin-bottom: 0;

  .form-controls {
    padding: 10px;
    margin: 0;
    background-color: lighten($ic-color-neutral, 5%);
    border-top: 1px solid $ic-border-light;
    text-align: right;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
  }

  .form-dialog-content {
    // jQuery UI handles overflow on its own, but our buttons are inside the
    // default scroll area, this gives us our own scrollable content area
    // while still allowing us to use the height option in $.fn.dialog
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 51px;
    overflow: auto;
    padding: 20px;
  }
}

